<template>
    <div class="app-container">
        <el-card class="count-container" shadow="never">
            <div>
                <el-row>
                    <i class="el-icon-knife-fork"></i>
                    <span>计量单位</span>
                </el-row>
                <el-row class="row-margin">
                    <el-button size="small" type="primary" @click="handleOpenCortModal">
                        新增
                    </el-button>
                    <el-dialog
                        :title="editingUnitId === null ? '新增计量单位' : '编辑计量单位'"
                        :visible.sync="unitModalVisible"
                        width="40%"
                    >
                        <el-form ref="unitFormRef" :model="addUnitForm" label-width="120px">
                            <el-form-item label="计量单位名称">
                                <el-input v-model="addUnitForm.name"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="unitModalVisible = false">取 消</el-button>
                            <el-button type="primary" @click="handleSaveUnit">保 存</el-button>
                        </span>
                    </el-dialog>
                </el-row>
                <el-row style="margin-top:12px;">
                    <el-popover
                        class="unit-block"
                        v-for="item in unitList"
                        :key="item.id"
                        placement="bottom-start"
                        trigger="hover"
                    >
                        <el-row type="flex" justify="center">
                            <el-button
                                @click="handleOpenCortModal($event, item.id)"
                                type="primary"
                                size="small"
                                icon="el-icon-edit"
                            >
                            </el-button>
                            <el-button
                                @click="onDeleteUnit(item.id)"
                                type="primary"
                                size="small"
                                icon="el-icon-delete"
                            >
                            </el-button>
                        </el-row>
                        <el-button slot="reference">{{ item.name }}</el-button>
                    </el-popover>
                </el-row>
            </div>
        </el-card>

        <el-card class="cort-container" style="margin-top:12px;" shadow="never">
            <div>
                <el-row class="title">
                    <i class="el-icon-house"></i>
                    <span>商品角标</span>
                    <span>建议尺寸200*200</span>
                </el-row>
                <el-row class="row-margin">
                    <!-- <div v-for="item in cortList" :key="item.id" style="width: 200px;height: 200px">
                    </div> -->
                    <el-image
                        class="cort-image"
                        :src="item.url"
                        v-for="item in cortList"
                        :key="item.id"
                        style="width: 148px;height: 148px"
                    />

                    <el-upload
                        style="display: inline-block; vertical-align: top;margin-left: -4px"
                        list-type="picture-card"
                        action="no"
                        :http-request="handleImageUpload"
                        :before-upload="handleBeforeCortUpload"
                        :auto-upload="true"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-row>
            </div>
        </el-card>
    </div>
</template>
<script>
import {
    createCort,
    createUnit,
    getCortList,
    getUnitList,
    updateCort,
    updateUnit,
    deleteUnit,
    deleteCort
} from '@/api/cornerMark';

export default {
    name: 'supplementaryInfo',
    data() {
        return {
            unitModalVisible: false,
            unitList: [],
            cortList: [],
            addUnitForm: {
                name: ''
            },
            editingUnitId: null
        };
    },
    created() {
        this._refresh();
    },
    methods: {
        _refresh() {
            getCortList().then(res => {
                if (res.data.success === true) {
                    // console.log(`- cort: `, res.data.data);
                    this.cortList = res.data.data;
                } else {
                }
            });
            getUnitList().then(res => {
                if (res.data.success === true) {
                    // console.log(`- unit: `, res.data.data);
                    this.unitList = res.data.data;
                } else {
                }
            });
        },
        handleOpenCortModal(e, id) {
            if (id) {
                this.editingUnitId = id;
            } else {
                this.editingUnitId = null;
            }
            this.$nextTick(() => {
                this.unitModalVisible = true;
            });
        },
        handleSaveUnit() {
            if (this.editingUnitId === null) {
                createUnit(this.addUnitForm.name).then(res => {
                    if (res.data.success === true) {
                        this.$message({
                            message: '新增计量单位成功！',
                            type: 'sucess',
                            duration: 1000
                        });
                        this.$refs.unitFormRef.resetFields();
                        this._refresh();
                        this.unitModalVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        });
                    }
                });
            } else {
                updateUnit(this.editingUnitId, this.addUnitForm.name).then(res => {
                    if (res.data.success === true) {
                        this.$message({
                            message: '修改计量单位成功！',
                            type: 'sucess',
                            duration: 1000
                        });
                        this.$refs.unitFormRef.resetFields();
                        this._refresh();
                        this.unitModalVisible = false;
                    } else {
                        this.$message({
                            message: res.data.msg,
                            type: 'error',
                            duration: 3000
                        });
                    }
                });
            }
        },
        onAddUnit() {},
        onEditUnit() {},
        onDeleteUnit(id) {
            deleteUnit(id).then(res => {
                if (res.data.success === true) {
                    this.$message({
                        message: '删除成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this._refresh();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        onAddCort() {},
        onEditCort() {},
        onDeleteCort(id) {
            deleteCort(id).then(res => {
                if (res.data.success === true) {
                    this.$message({
                        message: '删除成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this._refresh();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleImageUpload(fileObj) {
            let param = new FormData();
            // https://www.jianshu.com/p/2831f7488654
            param.append('imageFile', fileObj.file);
            createCort(param).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '上传成功！',
                        type: 'sucess',
                        duration: 1000
                    });
                    this._refresh();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleBeforeCortUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isLt2M;
        }
    }
};
</script>

<style lang="scss" scoped>
.count-container {
    .count-list {
        margin: 0;
        padding: 0;
        list-style-type: none;
        // /deep/ .el-icon-edit {

        // }
    }
    .unit-block {
        margin-right: 12px;
    }
}
.cort-container {
    .title {
        span:nth-child(2) {
            margin-right: 8px;
        }
        span:nth-child(3) {
            font-size: 12px;
            color: #909399;
        }
    }
    .cort-image {
        margin-right: 12px;
    }
}
</style>
